import { useState } from 'react'

const Control = ({ value, text, onIncr, onDecr }) => (
  <div className="d-flex justify-content-between item-align-center" style={{ width: 200 }}>
    <button style={{ height: '2em' }} onClick={onDecr}>
      -
    </button>
    <div>
      <h3>{value}</h3>
      <div>{text}</div>
    </div>
    <button style={{ height: '2em' }} onClick={onIncr}>
      +
    </button>
  </div>
)

const AudioControls = () => {
  let [volume, setVolume] = useState(0)
  let [treble, setTreble] = useState(0)
  let [mid, setMid] = useState(0)
  let [bass, setBass] = useState(0)
  return (
    <>
      <Control text="音量" value={volume} onIncr={() => setVolume(volume + 1)} onDecr={() => setVolume(volume - 1)} />
      <Control text="高音" value={treble} onIncr={() => setTreble(treble + 1)} onDecr={() => setTreble(treble - 1)} />
      <Control text="中音" value={mid} onIncr={() => setMid(mid + 1)} onDecr={() => setMid(mid - 1)} />
      <Control text="低音" value={bass} onIncr={() => setBass(bass + 1)} onDecr={() => setBass(bass - 1)} />
    </>
  )
}

const AudioControls2 = () => {
  const names = {
    volume: '音量',
    treble: '高音',
    mid: '中音',
    bass: '低音',
  }
  const [audio, setAudio] = useState({
    volume: 0,
    bass: 0,
    mid: 0,
    treble: 0,
  })
  return (
    <>
      {Object.keys(names).map((key) => (
        <Control key={key} text={names[key]} value={audio[key]} onIncr={() => setAudio({ ...audio, [key]: audio[key] + 1 })} onDecr={() => setAudio({ ...audio, [key]: audio[key] - 1 })} />
      ))}
    </>
  )
}

export default AudioControls2
